<template>
    <div class="videoBox">
        <video
            ref="videoPlayer"
            class="video-js"
            @canplay="getTotalTime"
            @timeupdate="timeUpdate"
        ></video>
        <!-- 自定义控件 -->
        <div class="controlBar">
            <div
                class="progressBar"
                @mousedown="isDraging = true"
                @mouseup="isDraging = false"
            >
                <el-slider
                    v-model="currentTimeVal"
                    :max="totalTimeVal"
                    :format-tooltip="timeFormat"
                    @change="progressUpdate"
                ></el-slider>
            </div>
            <div class="controlBtnBox">
                <div class="left">
                    <i
                        :class="[
                            isPaused
                                ? 'el-icon-video-play'
                                : 'el-icon-video-pause',
                        ]"
                        class="icon-size"
                        @click="togglePlay()"
                    ></i>
                    <span>{{ currentTime }}/{{ totalTime }}</span>
                </div>
                <div class="right">
                    <i
                        class="el-icon-d-arrow-left icon-size"
                        @click="back(player.currentTime())"
                    ></i>
                    <i
                        class="el-icon-d-arrow-right icon-size"
                        @click="forward(player.currentTime())"
                    ></i>
                    <i
                        class="el-icon-bell icon-size"
                        @click="toShowVolumeBar"
                    ></i>
                    <div id="volumeBar" v-show="isShowVolumeBar">
                        <el-slider
                            v-model="volume"
                            vertical
                            height="100px"
                            @input="changeVolume"
                        ></el-slider>
                    </div>
                </div>
                <div class="rateBox">
                    <span @click="toShowOptions">{{ ratedisplay }}</span>
                    <div class="rateOptions" v-show="isShowRateOptions">
                        <span
                            v-for="(r, index) in rateOptions"
                            :key="index"
                            @click="setPlayRate(r)"
                        >
                            {{ r }}x
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "video.js/dist/video-js.css";

export default {
    name: "videoPlayer",
    // 接收来自父组件videoComponent的video的具体配置信息,这样可以实现对VideoPlayer组件的复用
    props: {
        src: {
            type: String,
        },
    },
    // 用计算属性来实现当速率为1时，显示“倍速”
    computed: {
        ratedisplay() {
            if (this.rate === 1) {
                return "倍速";
            } else {
                return this.rate + "x";
            }
        },
    },
    data() {
        return {
            player: null,
            // 当前播放速率
            rate: 1.0,
            // 播放速率
            rateOptions: [2.0, 1.75, 1.5, 1.0, 0.75, 0.5],
            // 显示速率选项和音量选项
            isShowRateOptions: false,
            isShowVolumeBar: false,
            // 音量
            volume: 30,
            // 是否暂停
            isPaused: true,
            // 当前播放时间点和视频总时长
            currentTime: "00:00:00",
            totalTime: "00:00:00",
            // 进度条的当前值，必须为number类型
            currentTimeVal: 0,
            // 进度条最大值，必须为number类型
            totalTimeVal: 0,
            // 是否在拖到进度条
            isDraging: false,
            videoOptions: {
                // controls配置项决定是否显示默认控件，因为这里要做自定义的控件，就不显示了
                controls: false,
                // fluid配置项根据外层css样式大小，自动填充宽高
                fluid: true,
                // sources配置项配置视频播放源
                sources: [
                    {
                        // 播放源
                        src: this.src,
                        // 视频类型
                        type: "video/mp4",
                    },
                ],
            },
        };
    },
    methods: {
        createVideoPlayer(src) {
            this.player = this.$videoJS(this.$refs.videoPlayer, {
                // controls配置项决定是否显示默认控件，因为这里要做自定义的控件，就不显示了
                controls: false,
                // fluid配置项根据外层css样式大小，自动填充宽高
                fluid: true,
                // sources配置项配置视频播放源
                sources: [
                    {
                        // 播放源
                        src: src,
                        // 视频类型
                        type: "video/mp4",
                    },
                ],
            });
        },
        // 显示速率选项
        toShowOptions() {
            this.isShowRateOptions = !this.isShowRateOptions;
        },
        toShowVolumeBar() {
            this.isShowVolumeBar = !this.isShowVolumeBar;
        },
        // 视频时长格式化
        timeFormat(time) {
            let hour = Math.floor(time / 3600),
                minute = Math.floor((time % 3600) / 60),
                second = Math.floor(time % 60);
            hour = hour < 10 ? "0" + hour : hour;
            minute = minute < 10 ? "0" + minute : minute;
            second = second < 10 ? "0" + second : second;
            return `${hour}:${minute}:${second}`;
        },
        // 获取视频的总时长和进度条最大值
        getTotalTime() {
            this.totalTime = this.timeFormat(this.player.duration());
            this.totalTimeVal = Math.floor(this.player.duration());
        },
        // 改变速率
        setPlayRate(rate) {
            this.rate = rate;
            this.player.playbackRate(rate);
            this.isShowRateOptions = false;
        },
        // 控制视频的播放与暂停
        togglePlay() {
            console.log();
            this.isPaused = !this.isPaused;
            if (!this.isPaused) {
                this.player.play();
            } else {
                this.player.pause();
            }
        },
        // 更新视频当前播放时间
        timeUpdate() {
            // 如果当前正在拉到进度条，先停止更新当前播放时间，直接return结束这个函数
            // 没有这一句会出现拉动进度条跳转失败的bug
            if (this.isDraging) return;

            this.currentTime = this.timeFormat(this.player.currentTime());
            this.currentTimeVal = this.player.currentTime();
            // 当前时间更新到等于总时长时，要改变视频的播放状态按钮
            if (this.currentTime === this.totalTime) {
                this.isPaused = true;
            }
        },
        // 进度条拉动时更新进度条值并从拉到的位置播放
        progressUpdate(val) {
            this.player.currentTime(val);
            // 虽然mouseup已经可以改变isDraging的值，但下面这句不能少，不然视频播放结束再点击播放时，进度条不会回到最开始位置
            this.isDraging = false;
        },
        // 改变音量
        changeVolume(val) {
            this.volume = val;
            // 由于h5规定volum的值在0-1之间，所以这里要对获取到的val做一个处理(滑块的val是从0-100)
            this.player.volume(val / 100);
        },
        // 快进
        forward(ct) {
            this.progressUpdate(ct + 10);
        },
        // 后退
        back(ct) {
            this.progressUpdate(ct - 10);
        },
    },
    created() {},
    mounted() {
        //   console.log('Video component mounted')
        //   console.log('Video path:', this.src)
        //   console.log('Video options:', this.videoOptions)
        //   this.$nextTick(() => {
        //     this.createVideoPlayer()
        //   })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose();
        }
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/video-player.scss";
</style>
